/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/

@import url("tools/typography.css");

.assign-user-container {
  display: flex;
  flex-direction: column;
  inline-size: 272px;
  max-block-size: 500px;
  overflow: hidden;
  padding: var(--spacing-8);

  & .assignee-title {
    @mixin font-small;

    margin-block-end: var(--spacing-4);
    margin-block-start: 0;
    text-transform: uppercase;
  }

  & .unassign-title {
    @mixin font-paragraph;

    color: var(--color-gray80);
    font-style: italic;
    margin-block-end: var(--spacing-8);
    margin-block-start: 0;
  }
}

.search-form {
  flex-grow: 1;
  flex-shrink: 0;
  margin-block-end: var(--spacing-16);
  padding-block-start: var(--spacing-8);
}

.user-row {
  align-items: center;
  background-color: var(--color-gray10);
  border: 1px solid var(--color-white);
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  padding-block: 0;
  padding-inline: var(--spacing-8) 0;

  &:focus-visible {
    border: 1px solid var(--color-secondary);
  }

  &:hover {
    background-color: var(--color-gray20);
    border: 1px solid var(--color-white);
    cursor: pointer;
  }

  &.view-only {
    background-color: initial;
    cursor: auto;

    &:hover {
      background-color: initial;
    }

    & .user-identifier {
      color: var(--color-gray80);
    }
  }

  & .user {
    align-items: center;
    display: flex;
  }

  & .user-identifier {
    @mixin font-inline;

    color: var(--color-secondary80);
    font-weight: var(--font-weight-regular);
    margin-inline-start: var(--spacing-12);

    &::ng-deep .is-self {
      color: var(--color-black);
      font-weight: var(--font-weight-regular);
    }
  }

  & .unassign-btn {
    background-color: var(--color-gray10);
    block-size: var(--spacing-32);
    border-radius: 4px;
    color: var(--color-secondary);
    inline-size: var(--spacing-32);
    padding: var(--spacing-8);

    &:hover {
      background-color: var(--color-gray30);
      cursor: pointer;
    }
  }
}

ul {
  margin: 0;
  padding: 0;

  & .option {
    margin-block-end: var(--spacing-4);
  }
}

.assigness-container {
  flex: 1 0 auto;
  max-block-size: 300px;
  overflow: auto;

  &.no-assigness-title {
    max-block-size: 264px;
  }
}

.assigness-search-container {
  flex: 1 1 auto;
  overflow: auto;
}

.assignees-wrapper {
  align-items: center;
  border-block-end: 1px solid var(--color-gray30);
  display: flex;
  justify-content: space-between;
  margin-block-end: var(--spacing-8);
  padding: var(--spacing-8);

  &.no-border {
    border-block-end: none;
  }
}

.unassigned-member-row {
  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  padding-block: 0;
  padding-inline: 0;

  &:hover {
    background-color: var(--color-gray20);
    border: 1px solid var(--color-white);
    cursor: pointer;

    & tg-user-card {
      --color-user-name: var(--color-gray90);
      --color-user-name-is-self: var(--color-gray90);
    }
  }

  &:focus-visible {
    border: 1px solid var(--color-secondary);
  }

  & .assign-btn {
    background-color: var(--color-gray10);
    block-size: var(--spacing-32);
    border-radius: 4px;
    color: var(--color-secondary);
    display: none;
    inline-size: var(--spacing-32);
    margin-inline-end: var(--spacing-4);
    padding: var(--spacing-8);

    &:hover {
      background-color: var(--color-gray30);
    }
  }

  &:hover,
  &:focus {
    & .assign-btn {
      display: block;
    }
  }
}

.disabled {
  & .unassigned-member-row {
    background-color: var(--color-gray10);
    cursor: auto;

    & tg-user-card {
      --color-user-name: var(--color-gray70);
      --color-user-name-is-self: var(--color-gray70);
    }

    &::ng-deep img,
    &::ng-deep tui-avatar {
      opacity: 0.5;
    }
  }

  & .disabled-btn {
    block-size: var(--spacing-32);
    color: var(--color-gray60);
    cursor: pointer;
    inline-size: var(--spacing-32);
    padding: var(--spacing-8);
  }
}

.unassignees-title {
  @mixin font-paragraph;

  border-block-start: 1px solid var(--color-gray30);
  color: var(--color-secondary);
  margin-block: var(--spacing-12) var(--spacing-4);
  padding-block-start: var(--spacing-12);
}

.no-members {
  @mixin font-paragraph;

  color: var(--color-gray80);
  font-style: italic;
  padding-block-end: var(--spacing-8);
  padding-inline: var(--spacing-8);
  text-align: center;
}

.card {
  &::ng-deep .user-card {
    padding-block: var(--spacing-4);
    padding-inline: 0;
  }
}

.story-dropdown {
  max-block-size: 460px;

  & .story-title {
    align-items: center;
    display: flex;
    margin-block-end: 0;
    min-block-size: 38px;
    padding: 0;
  }

  & .unassign-title {
    margin-block-end: 0;
  }

  & .assigness-container {
    max-block-size: 266px;
  }

  & .assign-user-container {
    max-block-size: 459px;
  }
}
